<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心-我的地址</title>
</head>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 56px;!important;
        height: 56px;!important;
    }

    .el-aside {
        /*color: #333;*/
        color: #545c64;
    }

    body > .el-container {
        margin-bottom: 40px;
        height: 100%;
    }

    body, html {
        height: 100%;
    }

    .profile {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 500px;
        height: 450px;
        margin-left: -190px;
        margin-top: -200px;
        padding: 40px;
        border-radius: 5px;
        background: black;
        opacity: 0.85;
    }
</style>
<body>
<div id="app">
    <!--顶部用户导航栏-->
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <div style="margin-left: 21%;margin-right: 19%">
        <el-container>
            <el-aside width="250px" style="background-color: #545c64">
                <el-col style="width: 250px;height:auto;">
                    <el-menu default-active="2-1"
                             :default-openeds=["1","2"]
                             class="el-menu-vertical-demo"
                             background-color="#545c64"
                             text-color="#fff"
                             active-text-color="#ffd04b">
                        <el-submenu index="1" style="width: 250px">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>个人信息</span>
                            </template>
                            <el-menu-item index="1-1" @click="jumpPersonalCenter">我的资料</el-menu-item>
                            <el-menu-item index="1-2" @click="jumpChangePwd">修改密码</el-menu-item>
                            <el-menu-item index="1-3" @click="jumpChangeAvatar">更改头像</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2" style="width: 250px">
                            <template slot="title">
                                <i class="el-icon-location-outline"></i>
                                <span>地址管理</span>
                            </template>
                            <el-menu-item index="2-1" @click="jumpUserAddress">我的地址</el-menu-item>
                            <el-menu-item index="2-2" @click="jumpNewAddress">添加新地址</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-aside>
            <el-container>
                <el-header height="56px">
                    <el-link :underline="false" type="primary" href="/index.html"><span
                            style="color: white; font-size: 20px">← 返回首页</span>
                    </el-link>
                </el-header>
                <el-main>
                    <el-row v-for="(data,index) in dataList" :key="data.id">
                        <div style="font-size: 20px;margin-top: 10px;">
                            <el-card class="box-card" style="width:auto;">
                                <div slot="header" class="clearfix" >
                                    <label :for="data.id" style="font-size: 18px">
                                        <span style="font-size: 15px">收货人：{{data.name}}</span>
                                        <span style="margin-left:25%;font-size: 15px">手机号码：{{data.tel}}</span>
                                    </label>
                                    <el-button type="danger" icon="el-icon-close" circle
                                               @click="deleteById(data.id)" style="float: right;margin-top:-5px" >
                                    </el-button><!--删除-->
                                </div>
                                <div style="display: flex;flex-direction: row;justify-content: space-between">
                                    <b style="width:90%"><span style="font-size: 25px;">{{data.address}}</span></b>
                                    <div style="display: flex; align-items: center;">
                                        <el-button style="float: right;" icon="el-icon-edit" type="info" circle @click="echo(data)"></el-button>
                                    </div>
                                </div>

                            </el-card>
                        </div>
                    </el-row>
                </el-main>
            </el-container>
        </el-container>
        <el-dialog
                title="修改地址"
                :visible.sync="editVisible"
                center
                :close-on-click-modal = "false"
                width="30%">
            <el-form ref="editAddressee" :model="editDialog"  :rules="rules">
                <el-row>
                    <el-col>
                        <el-form-item label="收件人:" prop="name" >
                            <el-input v-model="editDialog.name" type="text"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               <el-row>
                   <el-col>
                       <el-form-item label="手机号码:" prop="tel">
                           <el-input v-model="editDialog.tel" type="text"></el-input>
                       </el-form-item>
                   </el-col>
               </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="地址:" prop="address" >
                            <el-input v-model="editDialog.address" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <br>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <div style="margin-left: 35%">
                                <el-button  type="primary" round @click="updateAddressee('editAddressee')">确定</el-button>
                                <el-button  round @click="editVisible= false">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser()
            this.showAddress()
        },
        mounted() {
            //页面加载完成后，发送异步请求，获取所有数据

        },
        methods: {
            updateAddressee() {
                this.$refs.editAddressee.validate((valid) => {
                        if (valid) {
                            axios.post("/address",
                                this.editDialog
                            ).then((res) => {
                                if (res.data.code==1) {   //修改成功
                                    // 弹出消息提示
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                    this.showAddress();
                                    this.editVisible=false;
                                }
                            })
                        } else {
                            // 弹出消息提示
                            this.$message({
                                message: "信息填写错误",
                                type: 'error'
                            });
                        }
                    }
                );
            },
            echo(val){
                var _this = this;
                _this.editVisible= true;
                /**
                 * 采用深拷贝，引用类型，不会改变表单原始数据
                 * @type {any}
                 */
                _this.editDialog = JSON.parse(JSON.stringify(val));
            },
            deleteById(row) {
                this.$confirm('确认是否删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var _this = this;
                    axios({
                        method: "delete",
                        url: "/address/" +row,
                    }).then(function (resp) {
                        if (resp.data.code ==1) {//删除成功
                            // 重新查询数据
                            _this.showAddress();

                            _this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showAddress(){
                axios({
                    method: "get",
                    url: "/address/list",
                }).then(resp =>{
                    console.log(resp.data.data)
                    this.dataList=resp.data.data;
                })
            },
            getUser() {//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    console.log(this.User.id)
                    console.log(this.User);
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }else{this.User={username:null}}
                })
            },

            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {

                    })
                    window.location.href = "../index.html"
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            jumpLogin(){
                location.href ="/login_page/login";
            },
            jumpRegister(){
                location.href ="/register.jsp";
            },
            jumpPersonalCenter(){
                location.href ="personCenter.html";
            },
            jumpChangePwd(){
                location.href ="updatePwd.html";
            },
            jumpChangeAvatar(){
                location.href ="updateAvatar.html";
            },
            jumpUserAddress(){
                location.href ="userAddress.html";
            },
            jumpNewAddress(){
                location.href ="newAddress.html";
            },
            jumpOrders(){
                location.href ="orders.html";
            },
            jumpCart(){
                location.href ="cart.html";
            },
            jumpCollect(){
                location.href ="/user_page/collect.html";
            },
        },
        data() {
            return {
                User: [],//用户信息
                edit: true,//控制表单是否可填
                visibleNotYet: true,
                visibleAlready: false,
                editVisible:false,
                pick: '',
                editDialog:{
                    name:'',
                    tel:'',
                    address:''
                },
                dataList: [
                    {realName: 'xiao', tel: '123123', address: '123', id: 1, value: '1'},//id不能为‘’（字符），单选id索引需要“”（字符串或数字）
                    {realName: 'xiao', tel: '123123', address: '123', id: 2, value: '2'},
                ],
                rules: {//校验规则
                    name:[{required: true, message: '请输入收件人姓名', trigger: 'blur'}],
                    tel: [
                        {required: true, message: "请输入手机号码", trigger: "blur"},
                        {
                            validator: function (rule, value, callback) {
                                if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) == false) {
                                    callback(new Error("请输入13位手机号码"));
                                } else {
                                    //校验通过
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    address: [
                        {required: true, message: '请输入收件地址', trigger: 'blur'}]
                }
            }
        }
    })
</script>
</html>